<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="寻物找人" title-size="36" :border-bottom="false"> </u-navbar>
      </view>
      <view class="infomation">
        <view
          class="infomation_box"
          @click="routeTo('/other/merchant-center/merchant-center?id=' + item.shop.id)"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <view class="info-top dis-flex flex-y-center flex-y-between">
            <view class="top-l dis-flex flex-y-center">
              <u-image
                class="user-img"
                style="margin-right: 20rpx"
                :src="item.picUrl"
                width="60rpx"
                height="60rpx"
                border-radius="30"
              ></u-image>
              <view class="user-name">用户昵称</view>
            </view>
            <view class="top-r dis-flex flex-y-center">
              <view class="r-label">寻物</view>
              <view class="r-label label-r">置顶中</view>
            </view>
          </view>
          <!-- 			<view class="info-label dis-flex flex-y-center">
						<view class="label-item">有停车场</view>
						<view class="label-item">无物业费</view>
						<view class="label-item">精装修</view>
					</view> -->
          <view class="info-content">
            <view class="info-tl">南明区市中心位置1480㎡火锅餐饮店整体转让餐饮店整体转让</view>
            <view class="con">
              <!-- <view class="con-item">行业类型：美食餐饮</view>
							<view class="con-item">租金：32000元/月</view> -->
              <view style="color: #10a28f; margin-top: 4rpx">全文</view>
            </view>
            <scroll-view
              scroll-x
              class="scrollView con-imgs"
              :enhanced="true"
              :show-scrollbar="false"
            >
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
              <u-image
                class="con-img"
                src=""
                width="200rpx"
                height="200rpx"
                border-radius="20"
              ></u-image>
            </scroll-view>
          </view>
          <view class="info-other">
            <!-- <view class="info-add dis-flex flex-y-center">
							<u-icon style="margin-right: 10rpx;" name="/static/same_city/dw.png" size="20"></u-icon>
							<view class="oneline-hide">贵州省贵阳市南明区花果园大街花果园大街</view>
						</view> -->
            <view class="info-bt dis-flex flex-y-center flex-y-between">
              <view class="bt-r dis-flex flex-y-center">
                <u-icon
                  style="margin-right: 8rpx"
                  name="/static/same_city/lll_icon.png"
                  size="28"
                ></u-icon>
                <view class="view mar-40">3600</view>
                <u-icon
                  style="margin-right: 8rpx"
                  name="/static/same_city/sj_icon.png"
                  size="28"
                ></u-icon>
                <view class="view">2025-03-06 12:00</view>
              </view>
              <u-icon name="/static/same_city/pl.png" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,

      tabsList: [
        {
          name: '全部',
          status: '',
          commentStatus: ''
        },
        {
          name: '出租',
          status: 0,
          commentStatus: ''
        },
        {
          name: '出售',
          status: 10,
          commentStatus: ''
        },
        {
          name: '求租',
          status: 20,
          commentStatus: ''
        },
        {
          name: '求购',
          status: 30,
          commentStatus: false
        }
      ],
      itemList: [{}, {}, {}, {}],
      city: '',
      imgStyle: {
        width: '12rem'
      }
    }
  },
  onLoad() {
    // this.$u.get("/app-api/shop/info/get-category-list?type=0&parentId=1").then(res => {
    // 	res.data.forEach(item => {
    // 		this.categoryList.push(item)
    // 	})
    // 	this.queryList()
    // })
  },
  methods: {
    tabsChange(index) {
      this.current = index
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    clickScreen(index) {
      this.screenIndex = index
    },
    queryList(pageNo = 1, pageSize = 10) {
      // this.$u.api.getStoreList({
      // 	pageNo,
      // 	pageSize,
      // 	cityCode: this.cityCode,
      // 	recommend: 1
      // }).then(res => {
      // 	this.$refs.paging.complete(res.data.list)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.cate-icon {
  vertical-align: middle;
  margin-right: 10rpx;
}

.shaixuan {
  background-color: #fff;
  padding: 20rpx;
  justify-content: space-around;
  .sx-item {
    // width: 130rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 10rpx;
    line-height: 60rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #333333;
  }
  .mar-20 {
    margin-right: 20rpx;
  }
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.scrollView {
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  .screen-item {
    display: inline-block;
    margin-right: 32rpx;
  }
  .screen-item:last-child {
    margin-right: 0;
  }
  .checked {
    font-weight: 600;
    font-size: 30rpx;
    color: #10a28f;
  }
}

.infomation {
  padding: 20rpx;
}
.infomation_box {
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 30rpx 20rpx 20rpx 20rpx;

  .info-top {
    margin-bottom: 20rpx;
    .user-name {
      font-size: 30rpx;
    }
    .r-label {
      font-size: 20rpx;
      color: #10a28f;
      border-radius: 6rpx;
      border: 1rpx solid #10a28f;
      padding: 8rpx 10rpx;
      margin-left: 10rpx;
      box-sizing: border-box;
    }
    .label-r {
      background: #ed624f;
      color: #ffffff;
      border: 1rpx solid #ed624f;
    }
  }
  .info-label {
    font-size: 20rpx;
    color: #666666;
    margin-bottom: 20rpx;
    .label-item {
      background: #f0f0f0;
      border-radius: 6rpx;
      padding: 8rpx 10rpx;
      margin-right: 10rpx;
    }
  }
  .info-content {
    .info-tl {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
    .con {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
      line-height: 46rpx;
    }
    .con-img {
      display: inline-block;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
  .info-other {
    .info-add {
      margin-bottom: 20rpx;
      font-size: 24rpx;
    }
    .view {
      font-size: 24rpx;
      color: #999999;
    }
  }
  .mar-40 {
    margin-right: 40rpx;
  }
}
</style>
